<template>
  <div :class="wrapperClass">
    <e-button
      v-if="isHorizontal"
      type="secondary"
      icon="arrow-left"
      :disabled="leftBtnDisabled"
      style="border-radius:50%"
      @click="handleScroll('left')"
    />
    <div :class="scrollerClass">
      <ul :class="classes" ref="timeline" id="timeline">
        <slot></slot>
      </ul>
    </div>
    <e-button
      v-if="isHorizontal"
      type="secondary"
      icon="arrow"
      :disabled="rightBtnDisabled"
      style="border-radius:50%"
      @click="handleScroll('right')"
    />
  </div>
</template>
<script>
const prefixCls = 'haloe-timeline';

export default {
  name: 'Timeline',
  props: {
    mode: {
      type: String,
      default: 'vertical'
    },
    pending: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      leftBtnDisabled: false,
      rightBtnDisabled: true
    }
  },
  computed: {
    isHorizontal(){
      return this.mode === 'horizontal'
    },
    classes () {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.mode}`,
        {
          [`${prefixCls}-pending`]: this.pending,
        }
      ];
    },
    wrapperClass(){
      return [
        `${prefixCls}-wrapper`,
        `${prefixCls}-wrapper-${this.mode}`
      ]
    },
    scrollerClass () {
      return [
        {
          [`${prefixCls}-scroller-wrapper`]: this.isHorizontal
        }]
    },
  },
  methods:{
    handleScroll(direction){
      const ulDom = this.$refs.timeline;
      const ulStyle = getComputedStyle(ulDom)
      const totalItemWidth = ulStyle.width;
      const totalItemLeft = ulStyle.left;

      if(direction==='left'){
        this.rightBtnDisabled = false;
        const extraWidth = parseInt(totalItemWidth) + parseInt(totalItemLeft) - 500
        if(extraWidth>0) {
          if(extraWidth>50) {
            this.$refs.timeline.style.left = `${parseInt(totalItemLeft) - 50}px`
          } else {
            this.$refs.timeline.style.left = `${parseInt(totalItemLeft) - extraWidth}px`
            this.leftBtnDisabled = true;
          }
        } else {
          this.leftBtnDisabled = true;
        }
      }

      if(direction==='right') {
        this.leftBtnDisabled = false;
        if(parseInt(totalItemLeft)<0) {
          if(parseInt(totalItemLeft)<-50) {
            this.$refs.timeline.style.left = `${parseInt(totalItemLeft) - (-50)}px`
          } else {
            // this.$refs.timeline.style.left = `${parseInt(totalItemLeft) - parseInt(totalItemLeft)}px`
            this.$refs.timeline.style.left = '0px'
            this.rightBtnDisabled = true;
          }
        } else {
          this.rightBtnDisabled = true;
        }
      }
    }
  }
};
</script>

